<template>
	<div class="comment" :id="`comment${comment.id}`">
		<div class="comment-head">
			<div class="user-avatar">
				<wImage :image="comment.userImage"></wImage>
			</div>
			<div class="head-right">
				<section-title>
					<div style="display: flex;align-items: center;justify-content: space-between;">
						<div>
							<span class="from-user user-name">{{comment.userName || "匿名用户"}}</span>
							<span class="to-user" v-if="comment.acceptUserId"><span style="margin: 0 5px;">@</span><span
									class="user-name">{{comment.acceptUserName}}</span></span>
						</div>
						<div style="font-size: 13px;">
							<span style="color: #9c9c9c;margin-right: 20px;"
								class="createDate">{{comment.createDate}}</span>
							<span @click.stop="showCommentEditor=true" style="cursor: pointer;"
								class="reply10">回复</span>
						</div>
					</div>
				</section-title>
			</div>
		</div>
		<div class="comment-body">
			<div class="content-text">
				<p v-html="comment.content"></p>
			</div>
			<div class="publishComment" v-if="showCommentEditor" @click="reply(comment.id)" @click.stop="">
				<comment-message-editor :inline="true" :submitButtonShow="true" buttonText="回复" @submit="submitReply"></comment-message-editor>
			</div>
			<slot></slot>
		</div>
	</div>
</template>

<script>
	import sectionTitle from '@/components/section-title'
	import commentMessageEditor from 'comment-message-editor'
	import {
		publishComment
	} from '@/api/comments.js'
	import jQuery from 'jquery'
	export default {
		name: "comment",
		props: {
			comment: {
				type: Object
			},
			commentId: {
				type: String
			}
		},
		data() {
			return {
				showCommentEditor: false
			}
		},
		computed: {
			userInfo() {
				return this.$store.state.userInfo
			}
		},
		watch: {
			showCommentEditor(value) {
				if (value) {
					document.body.addEventListener('click', this.close)
				} else {
					document.body.removeEventListener('click', this.close)
				}
			}
		},
		components: {
			sectionTitle,
			commentMessageEditor
		},
		methods: {
			reply(id) {
				//const ref = `comment${id}`
				//console.log(id)
			},
			submitReply(v) {
				var data = {
					type: 1,
					acceptUserId: this.comment.userId,
					acceptUserName: this.comment.userName,
					acceptUserImage: this.comment.userImage,
					commentId: this.commentId,
					content: v,
				}
				data.userImage = this.userInfo.headphoto ||
					"https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2306696130,3636777462&fm=26&gp=0.jpg";
				data.userName = this.userInfo.username || "匿名用户";
				data.userId = this.userInfo.id || 1;
				publishComment(data).then(res => {
					if (this.$parent.getRemarks) {
						this.$parent.getRemarks(1);
					} else if (this.$parent.getComment) {
						this.$parent.getComment(1);
					}
					if (this.$parent.$parent.getRemarks) {
						this.$parent.$parent.getRemarks(1);
					} else if (this.$parent.$parent.getComment) {
						this.$parent.$parent.getComment(1);
					}
					this.$message({
						message: '回复成功',
						type: 'success'
					});
				})
			},
			close() {
				this.showCommentEditor = false
			}
		}
	}
</script>

<style scoped lang="less">
	.comment {
		margin: 20px 0;
	}

	.comment-head {
		display: flex;

		.head-right {
			flex: 1;
		}

		.user-name {
			color: #8fd0cc;
		}
	}

	.comment-body {
		padding-left: 80px;

		.content-text {
			/*padding-bottom: 30px;*/
			margin-bottom: 30px;
			font-size: 14px;
			color: #9c9c9c;
			line-height: 1.3rem;
			word-break: break-all;
		}
	}

	.user-avatar-image {
		border-radius: 50% !important;
	}

	.user-avatar {
		width: 50px;
		height: 50px;
		margin-right: 30px;

		img {
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}
	}

	@media (max-width: 600px) {
		.comment-body {
			padding-left: 15px;

			.content-text {
				margin-top: 10px;
			}
		}

		.user-avatar {
			margin-right: 10px;
		}
	}
</style>
<!-- 手机适配 -->
<style lang="less">
	.user-avatar {
		width: 50px;
		height: 50px;
		margin-right: 30px;
	
		img {
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}
	}
	@media screen and (max-width: 1024px) {
		.comments {
			font-size: 12px;

			.user-name {
				font-size: 12px !important;
			}

			.createDate {
				font-size: 12px !important;
			}

			.reply10 {
				font-size: 12px !important;
			}

			.comment-body {
				padding-left: 40px !important;
				.content-text{
					margin: 0;
					font-size: 12px;
				}
			}

			.user-avatar {
				width: 30px;
			}
		}
	}
</style>
